<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>生产现况看板</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<link rel="stylesheet" href="${pageContext.request.contextPath }/assets/css/layui.css"  media="all">
	<link rel="stylesheet" href="${pageContext.request.contextPath }/assets/css/toastr.min.css"  media="all">
</head>
<body>
<div class="layui-carousel" id="test1" lay-filter="test1">
  <div carousel-item="">
    <div><table class="layui-hide" id="test" lay-filter="test"></table></div>
    <div><div id="container" style="min-width: 400px;height: 400px;"></div></div>
  </div>
</div>
<script type="text/html" id="toolbarDemo">
	<div class="layui-btn-container">
	</div>
</script>

<script src="${pageContext.request.contextPath }/assets/layui.js" charset="utf-8"></script>
<script src="${pageContext.request.contextPath }/assets/layui.all.js"></script>
<script src="${pageContext.request.contextPath }/assets/js/jquery.min.js" charset="utf-8"></script>
<script src="${pageContext.request.contextPath }/assets/js/toastr.min.js" charset="utf-8"></script>
<script src="https://img.hcharts.cn/highcharts/highcharts.js"></script>
<script src="https://img.hcharts.cn/highcharts/modules/exporting.js"></script>
<script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
 
<script>
layui.use(['table','layer','upload','form','carousel'], function(){
	var carousel = layui.carousel;
	var table = layui.table;
	var layer = layui.layer,
    form = layui.form;
	var laydate = layui.laydate;
	carousel.render({
	    elem: '#test1'
	    ,interval: 5000
	    ,anim: 'fade'
	    ,height: '400px'
	    ,width: '100%'
	    ,arrow: 'none'
	    ,indicator: 'none'
	});
	//执行一个laydate实例
	laydate.render({
		elem: '#time' //指定元素
		,type: 'datetime'
		,range: true
	});
	var $ = layui.jquery, active = {
			reload:function () {
				var time = $("#time").val();
				console.log(time)
				if (time == '') {
					toastr.warning("请选择日期段！");
	        		return false;
				}
				table.reload('contenttable',{
					method:'get',
					where:{time: time}
				});
			}
		}
	$('.layui-btn').on('click', function(){
        var type = $(this).data('type');
        active[type] ? active[type].call(this) : '';
    });
	//执行后台
	$.ajax({
    	url: '${pageContext.request.contextPath }/reportMana/listAllProductStatusByTime.do',
        type: "post",
        success: function (data) {
        	var ri = eval('(' + data + ')');
        	var list = ri.data;
        	if (list.length > 0) {
        		var categories = new Array();
            	var data1 = new Array();
            	var data2 = new Array();
            	var data3 = new Array();
            	var data4 = new Array();
            	var data5 = new Array();
            	var data6 = new Array();
            	var data7 = new Array();
            	var data8 = new Array();
            	var html = '';
            	for (var i = 0; i < list.length; i++) {
            		categories.push(list[i].stationName);
            		var productStatusList = list[i].productStatusList;
            		if (i == 0) {
               			data1.push((productStatusList[0].planAmount)/24);
                   		data2.push((productStatusList[0].completeAmount)/24);
                   		data3.push((productStatusList[1].planAmount)/24);
                   		data4.push((productStatusList[1].completeAmount)/24);
                   		data5.push((productStatusList[2].planAmount)/32);
                   		data6.push((productStatusList[2].completeAmount)/32);
                   		data7.push((productStatusList[3].planAmount)/32);
                   		data8.push((productStatusList[3].completeAmount)/32);
					} else {
						data1.push(productStatusList[0].planAmount);
	            		data2.push(productStatusList[0].completeAmount);
	            		data3.push(productStatusList[1].planAmount);
	            		data4.push(productStatusList[1].completeAmount);
	            		data5.push(productStatusList[2].planAmount);
	            		data6.push(productStatusList[2].completeAmount);
	            		data7.push(productStatusList[3].planAmount);
	            		data8.push(productStatusList[3].completeAmount);
					}
    			}
            	var chart = Highcharts.chart('container',{
            		chart: {
            			type: 'column',
            			marginRight: 200
            		},
            		title: {
            			text: '生产现况看板'
            		},
            		xAxis: {
            			categories: categories,
            			crosshair: true
            		},
            		yAxis: {
            			min: 0,
            			title: {
            				text: '数量'
            			}
            		},
            		tooltip: {
            			// head + 每个 point + footer 拼接成完整的 table
            			headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
            			pointFormatter: function() {
            				if (this.category == '膜丝') {
								if (this.series.name.indexOf('0960') != -1 || this.series.name.indexOf('0980') != -1) {
									if (this.y == 0) {
										return '<tr><td style="color:'+this.series.color+';padding:0">'+this.series.name+': </td>' +
			                			'<td style="padding:0"><b>'+this.y+'</b></td></tr>';
									} else {
										return '<tr><td style="color:'+this.series.color+';padding:0">'+this.series.name+': </td>' +
			                			'<td style="padding:0"><b>'+this.y+'*24</b></td></tr>';
									}
								} else {
									if (this.y == 0) {
										return '<tr><td style="color:'+this.series.color+';padding:0">'+this.series.name+': </td>' +
			                			'<td style="padding:0"><b>'+this.y+'</b></td></tr>';
									} else {
										return '<tr><td style="color:'+this.series.color+';padding:0">'+this.series.name+': </td>' +
			                			'<td style="padding:0"><b>'+this.y+'*32</b></td></tr>';
									}
								}
							} else {
								return '<tr><td style="color:'+this.series.color+';padding:0">'+this.series.name+': </td>' +
	                			'<td style="padding:0"><b>'+this.y+'</b></td></tr>';
							}
            			},
            			shared: true,
            			useHTML: true
            		},
            		plotOptions: {
            			column: {
            				borderWidth: 0
            			}
            		},
            		legend: {
            			layout: 'vertical',
            			align: 'right',
            			verticalAlign: 'top',
            			x: -40,
            			y: 100,
            			floating: true,
            			borderWidth: 1,
            			backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
            			shadow: true
            		},
            		series: [{
            			name: '0960T计划量',
            			data: data1
            		}, {
            			name: '0960T完成量',
            			data: data2
            		}, {
            			name: '0980T计划量',
            			data: data3
            		}, {
            			name: '0980T完成量',
            			data: data4
            		}, {
            			name: '1080C计划量',
            			data: data5
            		}, {
            			name: '1080C完成量',
            			data: data6
            		}, {
            			name: '1060B计划量',
            			data: data7
            		}, {
            			name: '1060B完成量',
            			data: data8
            		}]
            	});
			}
        }
	});
	table.render({
	    elem: '#test'
	    ,url:'${pageContext.request.contextPath }/reportMana/listAllProductStatusByTime.do'
	    ,title: '生产现况看板'
		,height: 400
		//,toolbar: '#toolbarDemo'
	    ,id :'contenttable'
	    //,limits:[10,20,30]
	    ,cols: [[
	      //{type: 'checkbox', fixed: 'left', rowspan: 2}
	      {type: 'numbers', title:'序号', fixed: 'left', rowspan: 2, width:'5%', unresize: true, sort: true}
	      ,{field:'stationName', title:'工位名称', rowspan: 2, align:'center'}
	      ,{field:'', title:'0960T', colspan: 3, align:'center'}
	      ,{field:'', title:'0980T', colspan: 3, align:'center'}
	      ,{field:'', title:'1080C', colspan: 3, align:'center'}
	      ,{field:'', title:'1060B', colspan: 3, align:'center'}
	    ],
	    [
	      {field:'planAmount1', title:'计划量', align:'center', templet: function(d){
	    	  return d.productStatusList[0].planAmount;
	      }}
	      /* {field:'lastPlanAmount1', title:'剩余计划量', align:'center', templet: function(d){
	    	  return d.productStatusList[0].lastPlanAmount;
	      }} */
	      ,{field:'completeAmount1', title:'完成量', align:'center', templet: function(d){
	    	  return d.productStatusList[0].completeAmount;
	      }}
	      ,{field:'productivity1', title:'生产率', align:'center', templet: function(d){
	    	  if (d.productStatusList[0].completeAmount > d.productStatusList[0].planAmount) {
	    		  return '100%';
			} else {
				if ('.00%' == d.productStatusList[0].productivity) {
		    		  return 0;
				} else {
					return d.productStatusList[0].productivity;
				}
			}
	      }}
	      ,{field:'planAmount2', title:'计划量', align:'center', templet: function(d){
	    	  return d.productStatusList[1].planAmount;
	      }}
	      /* ,{field:'lastPlanAmount2', title:'剩余计划量', align:'center', templet: function(d){
	    	  return d.productStatusList[1].lastPlanAmount;
	      }} */
	      ,{field:'completeAmount2', title:'完成量', align:'center', templet: function(d){
	    	  return d.productStatusList[1].completeAmount;
	      }}
	      ,{field:'productivity2', title:'生产率', align:'center', templet: function(d){
	    	  if (d.productStatusList[1].completeAmount > d.productStatusList[1].planAmount) {
	    		  return '100%';
			} else {
				if ('.00%' == d.productStatusList[1].productivity) {
		    		  return 0;
				} else {
					return d.productStatusList[1].productivity;
				}
			}
	      }}
	      ,{field:'planAmount3', title:'计划量', align:'center', templet: function(d){
	    	  return d.productStatusList[2].planAmount;
	      }}
	      /* ,{field:'lastPlanAmount3', title:'剩余计划量', align:'center', templet: function(d){
	    	  return d.productStatusList[2].lastPlanAmount;
	      }} */
	      ,{field:'completeAmount3', title:'完成量', align:'center', templet: function(d){
	    	  return d.productStatusList[2].completeAmount;
	      }}
	      ,{field:'productivity3', title:'生产率', align:'center', templet: function(d){
	    	  if (d.productStatusList[2].completeAmount > d.productStatusList[2].planAmount) {
	    		  return '100%';
			} else {
				if ('.00%' == d.productStatusList[2].productivity) {
		    		  return 0;
				} else {
					return d.productStatusList[2].productivity;
				}
			}
	      }}
	      ,{field:'planAmount4', title:'计划量', align:'center', templet: function(d){
	    	  return d.productStatusList[3].planAmount;
	      }}
	      /* ,{field:'lastPlanAmount4', title:'剩余计划量', align:'center', templet: function(d){
	    	  return d.productStatusList[3].lastPlanAmount;
	      }} */
	      ,{field:'completeAmount4', title:'完成量', align:'center', templet: function(d){
	    	  return d.productStatusList[3].completeAmount;
	      }}
	      ,{field:'productivity4', title:'生产率', align:'center', templet: function(d){
	    	  if (d.productStatusList[3].completeAmount > d.productStatusList[3].planAmount) {
	    		  return '100%';
			} else {
				if ('.00%' == d.productStatusList[3].productivity) {
		    		  return 0;
				} else {
					return d.productStatusList[3].productivity;
				}
			}
	      }}
	    ]]
	    ,page: false
	});
});

toastr.options.positionClass = 'toast-top-center'; //提示框的位置设置为中上
</script>

</body>
</html>